import { Content } from 'antd/es/layout/layout';
import { CSSProperties } from 'react';
import { Outlet } from 'react-router-dom';

import { useSettings } from '@/store/settingStore';

import { HEADER_HEIGHT } from '../config';

export default function ConsoleMain() {
  const { themeStretch, themeLayout, multiTab } = useSettings();

  const mainStyle: CSSProperties = {
    paddingTop: HEADER_HEIGHT,
    transition: 'padding 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
    width: '100%',
  };
  return (
    <Content style={mainStyle} className="flex overflow-auto">
      <div
        className={`m-auto h-full w-full flex-grow sm:p-2 ${
          themeStretch ? '' : 'xl:max-w-screen-xl'
        }`}
      >
        <Outlet />
      </div>
    </Content>
  );
}

// supplier;
// Demander;
